<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML与CSS | 浪飞IT小栈</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="前后端技术分享">
    <meta name="keywords" content="前端博客,后端博客,人工智能,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown,java,Spring,Springboot,Redis,mysql">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.ada71c49.css" as="style"><link rel="preload" href="/assets/js/app.a2a00aa5.js" as="script"><link rel="preload" href="/assets/js/2.256f807a.js" as="script"><link rel="preload" href="/assets/js/36.32e2e263.js" as="script"><link rel="prefetch" href="/assets/js/10.ab144fe3.js"><link rel="prefetch" href="/assets/js/11.062e0879.js"><link rel="prefetch" href="/assets/js/12.f9c60882.js"><link rel="prefetch" href="/assets/js/13.0a6ebfcf.js"><link rel="prefetch" href="/assets/js/14.03fc6f12.js"><link rel="prefetch" href="/assets/js/15.19dbf9fd.js"><link rel="prefetch" href="/assets/js/16.6e68160b.js"><link rel="prefetch" href="/assets/js/17.1d678834.js"><link rel="prefetch" href="/assets/js/18.4536fd5c.js"><link rel="prefetch" href="/assets/js/19.9c1b65df.js"><link rel="prefetch" href="/assets/js/20.c5f96e71.js"><link rel="prefetch" href="/assets/js/21.3f0b334e.js"><link rel="prefetch" href="/assets/js/22.55c868be.js"><link rel="prefetch" href="/assets/js/23.91286241.js"><link rel="prefetch" href="/assets/js/24.c1af1909.js"><link rel="prefetch" href="/assets/js/25.a995a755.js"><link rel="prefetch" href="/assets/js/26.abc5dea3.js"><link rel="prefetch" href="/assets/js/27.1eb62850.js"><link rel="prefetch" href="/assets/js/28.b383a871.js"><link rel="prefetch" href="/assets/js/29.088e0d73.js"><link rel="prefetch" href="/assets/js/3.cd716564.js"><link rel="prefetch" href="/assets/js/30.3ccc98d5.js"><link rel="prefetch" href="/assets/js/31.aab7cc23.js"><link rel="prefetch" href="/assets/js/32.5e16b7e6.js"><link rel="prefetch" href="/assets/js/33.4aaeb741.js"><link rel="prefetch" href="/assets/js/34.45e8e898.js"><link rel="prefetch" href="/assets/js/35.5899c97a.js"><link rel="prefetch" href="/assets/js/37.c4e27bbd.js"><link rel="prefetch" href="/assets/js/38.fe5e60d2.js"><link rel="prefetch" href="/assets/js/39.2cb0b4ee.js"><link rel="prefetch" href="/assets/js/4.edf4d5e7.js"><link rel="prefetch" href="/assets/js/40.08d5bead.js"><link rel="prefetch" href="/assets/js/41.2f80f24b.js"><link rel="prefetch" href="/assets/js/42.43a49913.js"><link rel="prefetch" href="/assets/js/43.08da7ec2.js"><link rel="prefetch" href="/assets/js/44.7c7cb8a9.js"><link rel="prefetch" href="/assets/js/45.0ddf7e7f.js"><link rel="prefetch" href="/assets/js/46.7c4609a5.js"><link rel="prefetch" href="/assets/js/47.edf3ddf8.js"><link rel="prefetch" href="/assets/js/48.569a90b9.js"><link rel="prefetch" href="/assets/js/49.fa368ac8.js"><link rel="prefetch" href="/assets/js/5.24054156.js"><link rel="prefetch" href="/assets/js/50.b9b3ea7f.js"><link rel="prefetch" href="/assets/js/51.a2ebf0fe.js"><link rel="prefetch" href="/assets/js/52.31f02238.js"><link rel="prefetch" href="/assets/js/53.4110ef1e.js"><link rel="prefetch" href="/assets/js/54.dab741c7.js"><link rel="prefetch" href="/assets/js/55.f27984e9.js"><link rel="prefetch" href="/assets/js/56.bd4c1a8e.js"><link rel="prefetch" href="/assets/js/57.375d40cb.js"><link rel="prefetch" href="/assets/js/58.932e3864.js"><link rel="prefetch" href="/assets/js/59.e657be1b.js"><link rel="prefetch" href="/assets/js/6.b259c061.js"><link rel="prefetch" href="/assets/js/60.88d94274.js"><link rel="prefetch" href="/assets/js/61.fa71d884.js"><link rel="prefetch" href="/assets/js/62.a9d3b3b7.js"><link rel="prefetch" href="/assets/js/63.f849fe75.js"><link rel="prefetch" href="/assets/js/64.1770f7a9.js"><link rel="prefetch" href="/assets/js/65.6afc33db.js"><link rel="prefetch" href="/assets/js/66.799f2eb4.js"><link rel="prefetch" href="/assets/js/67.f36b2f7d.js"><link rel="prefetch" href="/assets/js/68.868cd00b.js"><link rel="prefetch" href="/assets/js/69.4c29b907.js"><link rel="prefetch" href="/assets/js/7.e34ea00f.js"><link rel="prefetch" href="/assets/js/70.1b993ed4.js"><link rel="prefetch" href="/assets/js/71.e16ad4f9.js"><link rel="prefetch" href="/assets/js/72.627505e6.js"><link rel="prefetch" href="/assets/js/73.32768e14.js"><link rel="prefetch" href="/assets/js/74.968a580d.js"><link rel="prefetch" href="/assets/js/75.42d5af3d.js"><link rel="prefetch" href="/assets/js/76.19a69d31.js"><link rel="prefetch" href="/assets/js/77.cf627a78.js"><link rel="prefetch" href="/assets/js/78.07177880.js"><link rel="prefetch" href="/assets/js/8.c4dd00ce.js"><link rel="prefetch" href="/assets/js/9.0ff73be2.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ada71c49.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="浪飞IT小栈" class="logo"> <span class="site-name can-hide">浪飞IT小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/pages/6138ae/" class="nav-link">Java速通</a></div><div class="nav-item"><a href="/pages/705b35/" class="nav-link">面试经典</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="精品项目" class="dropdown-title"><a href="/project/" class="link-title">精品项目</a> <span class="title" style="display:none;">精品项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>桌面端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>PC后端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">项目1</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">项目二</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">电子书</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="/pages/0c07b2/" class="nav-link">IT杂货铺</a></div><div class="nav-item"><a href="/archives/" class="nav-link">更多资源</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/avatar.jpg"> <div class="blogger-info"><h3>浪飞yes</h3> <span>无法简单的人儿~</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/pages/6138ae/" class="nav-link">Java速通</a></div><div class="nav-item"><a href="/pages/705b35/" class="nav-link">面试经典</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="精品项目" class="dropdown-title"><a href="/project/" class="link-title">精品项目</a> <span class="title" style="display:none;">精品项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>桌面端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>PC后端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">项目1</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">项目二</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">电子书</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="/pages/0c07b2/" class="nav-link">IT杂货铺</a></div><div class="nav-item"><a href="/archives/" class="nav-link">更多资源</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>开篇</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>基础语法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>面向对象</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>常用类</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>基础高级</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>数据库</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>前端技术</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/84c5d2/" aria-current="page" class="active sidebar-link">HTML与CSS</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/pages/84c5d2/#一、今日学习内容与目标" class="sidebar-link">一、今日学习内容与目标</a></li><li class="sidebar-sub-header level2"><a href="/pages/84c5d2/#二、前言" class="sidebar-link">二、前言</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_2-1-web-开发介绍" class="sidebar-link">2.1 WEB 开发介绍</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_2-2-浏览器-了解" class="sidebar-link">2.2 浏览器(了解)</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_2-2-1-网页浏览器" class="sidebar-link">2.2.1 网页浏览器</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_2-2-2-微软-ie-的发展" class="sidebar-link">2.2.2 微软 IE 的发展</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_2-2-3-浏览器内核" class="sidebar-link">2.2.3 浏览器内核</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_2-2-4-浏览器常用快捷键-掌握" class="sidebar-link">2.2.4 浏览器常用快捷键(掌握)</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/84c5d2/#三、html" class="sidebar-link">三、HTML</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-1-介绍" class="sidebar-link">3.1  介绍</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-2-快速入门" class="sidebar-link">3.2  快速入门</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-3-html-基本语法" class="sidebar-link">3.3 HTML 基本语法</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-4-基础标签" class="sidebar-link">3.4 基础标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-4-1-标题标签" class="sidebar-link">3.4.1 标题标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-4-2-hr标签" class="sidebar-link">3.4.2  hr标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-4-3-字体标签" class="sidebar-link">3.4.3  字体标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-4-4-换行标签" class="sidebar-link">3.4.4  换行标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-4-5-段落标签" class="sidebar-link">3.4.5 段落标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-4-6-加粗-斜体-下划线标签" class="sidebar-link">3.4.6  加粗-斜体-下划线标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-4-7-居中标签" class="sidebar-link">3.4.7 居中标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-4-8-转义" class="sidebar-link">3.4.8 转义</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-5-图片标签" class="sidebar-link">3.5 图片标签</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-6-超链接标签" class="sidebar-link">3.6  超链接标签</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-7-列表标签" class="sidebar-link">3.7  列表标签</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-8-表格标签" class="sidebar-link">3.8 表格标签</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-9-布局标签" class="sidebar-link">3.9 布局标签</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-10-表单标签" class="sidebar-link">3.10  表单标签</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_3-11-表单控件标签-重点" class="sidebar-link">3.11 表单控件标签（重点）</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-11-1-input-标签" class="sidebar-link">3.11.1 input 标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-11-2-select-标签" class="sidebar-link">3.11.2 select 标签</a></li><li class="sidebar-sub-header level4"><a href="/pages/84c5d2/#_3-11-3-textarea-标签" class="sidebar-link">3.11.3 textarea 标签</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/84c5d2/#四、css" class="sidebar-link">四、CSS</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_4-1-概述" class="sidebar-link">4.1  概述</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_4-2-css-导入方式" class="sidebar-link">4.2  css 导入方式</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_4-3-css-选择器" class="sidebar-link">4.3  css 选择器</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_4-4-css-属性" class="sidebar-link">4.4  css 属性</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/84c5d2/#五、小结与作业" class="sidebar-link">五、小结与作业</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_5-1-小结" class="sidebar-link">5.1 小结</a></li><li class="sidebar-sub-header level3"><a href="/pages/84c5d2/#_5-2-作业" class="sidebar-link">5.2 作业</a></li></ul></li></ul></li><li><a href="/pages/42b6b6/" class="sidebar-link">JavaScript与DOM</a></li><li><a href="/pages/1125b7/" class="sidebar-link">网络编程与Tomcat</a></li><li><a href="/pages/be0e03/" class="sidebar-link">Http与Servlet</a></li><li><a href="/pages/9902e4/" class="sidebar-link">请求与响应</a></li><li><a href="/pages/18345f/" class="sidebar-link">JSP与EL与JSTL</a></li><li><a href="/pages/aa67fd/" class="sidebar-link">WEB版CRUD</a></li><li><a href="/pages/baec2f/" class="sidebar-link">Cookie与Session</a></li><li><a href="/pages/73e2cb/" class="sidebar-link">文件上传与下载和登录</a></li><li><a href="/pages/f99e33/" class="sidebar-link">项目实战-MIS系统</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>热门框架</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前后端分离</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>权限控制</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>NoSQL</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>微服务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>消息中间件</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>脚手架</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>技术增值</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><a href="/categories/?category=Java%E9%80%9F%E9%80%9A" title="分类" data-v-06225672>Java速通</a></li><li data-v-06225672><a href="/categories/?category=%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF" title="分类" data-v-06225672>前端技术</a></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://github.com/langfeiyes" target="_blank" title="作者" class="beLink" data-v-06225672>langfeiyes</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2024-03-03</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">HTML与CSS<!----></h1>  <div class="theme-vdoing-content content__default"><h1 id="html和css"><a href="#html和css" class="header-anchor">#</a> HTML和CSS</h1> <h2 id="一、今日学习内容与目标"><a href="#一、今日学习内容与目标" class="header-anchor">#</a> 一、今日学习内容与目标</h2> <ul><li>了解浏览器</li> <li>了解 WEB 开发</li> <li>掌握 HTML 基本语法</li> <li>掌握 HTML 常用标签</li> <li>理解列表标签</li> <li>掌握 超链接标签</li> <li>掌握 图片标签</li> <li>掌握 表格标签</li> <li>掌握 表单标签</li> <li>掌握 表单各种常用控件标签</li></ul> <h2 id="二、前言"><a href="#二、前言" class="header-anchor">#</a> 二、前言</h2> <p>Java 主要分三块领域</p> <p>JavaSE: Java 的核心基础</p> <p>JavaME: 开发手机端应用的旧技术,目前不再使用,目前是 : android ios</p> <p>JavaEE : 企业级应用，核心是 JavaWeb 内容</p> <p>后续的课程内容都是围绕JavaWeb 内容展开学习的。</p> <h3 id="_2-1-web-开发介绍"><a href="#_2-1-web-开发介绍" class="header-anchor">#</a> 2.1 WEB 开发介绍</h3> <p>WEB: 网页程序,基于浏览器访问的程序,可展现漂亮美观的动态页面</p> <p>JavaWeb : 用 <em>Java</em> 技术来解决相关<strong>web</strong>互联网领域的技术栈.</p> <p><strong>学 JavaWeb 的目标</strong>: 在浏览器中去展现和操作数据库中的数据.</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200429223308684.png" alt="image-20200429223308684"></em></p> <p><strong>web开发需要使用到的技术</strong></p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200429224043568.png" alt="image-20200429224043568"></em></p> <p>目前为止，我们已经学习了反射、注解、XML、MySQL、JDBC 等内容。</p> <p>接下来，我们将学习直接和 web 相关的知识点，其中最重要的就是今天要学习的 HTML。</p> <p>有了HTML，我们就能够将我们前面使用 JDBC / MyBatis 操作表数据得到的结果展示给用户了，并且能够为用户通过浏览器的方式操作数据库中的数据提供前期条件。</p> <p>那么我们应该如何使用 HTML 完成上面的功能呢？在后面的课程中我们一一进行讲解。</p> <p>今天我们可以学习到的主要有：对浏览器（了解）、HTML（熟练使用）、CSS（了解）、JS（了解）</p> <h3 id="_2-2-浏览器-了解"><a href="#_2-2-浏览器-了解" class="header-anchor">#</a> 2.2 浏览器(了解)</h3> <h4 id="_2-2-1-网页浏览器"><a href="#_2-2-1-网页浏览器" class="header-anchor">#</a> 2.2.1 网页浏览器</h4> <p><strong>WEB Browser</strong> : 常被简称为浏览器，是一种用于检索并展示万维网<strong>信息资源</strong>的应用程序。这些信息资源可为<strong>网页、图片、影音或其他内容</strong>，它们由统一资源标志符标志。信息资源中的超链接可使用户方便地浏览相关信息。
网页浏览器虽然主要用于使用万维网，但也可用于获取专用网络中网页服务器之信息或文件系统内之文件。</p> <p>主流网页浏览器有 Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200429230634036.png" alt="image-20200429230634036"></p> <p>建议使用 <strong>Google Chrome</strong> 浏览器为默认浏览器，功能强大、快速稳定
作为前端开发工程师，不建议默认使用 360、QQ、搜狗等等诸如此类浏览器，有失逼格（小心被鄙视,使用的不是自己的<strong>内核</strong>）</p> <h4 id="_2-2-2-微软-ie-的发展"><a href="#_2-2-2-微软-ie-的发展" class="header-anchor">#</a> 2.2.2 微软 IE 的发展</h4> <p>2003 年，微软宣布不会再推出的独立的 Internet Explorer，但会变成视窗平台的一部分；同时也不会再推出任何Macintosh版本的Internet Explorer。不过，于2005年初，微软却改变了计划，并宣布将会为Windows XP、Windows Server 2003 和 Windows Vista 操作系统推出 Internet Explorer 7。</p> <p>2011年3月15日，微软推出了Internet Explorer9的正式版，值得一提的是，Internet Explorer9不再支持Windows XP。微软官方表示，IE9不支持WindowsXP是因为其硬件加速功能在WindowsXP系统上无法正常运行。而windows7要求电脑内存至少在1G以上。对此，微软大中华区开发工具及平台事业部总经理谢恩伟表示，“建议这部分用户使用IE8。”</p> <p>2011年4月11日，Internet Explorer9 才推出1个月，微软又推出了 Internet Explorer10 的首个预览版本。Internet Explorer9不支持XP让不少用户感到愤怒，而如今细心的用户在Internet Explorer10平台开发版的最终用户许可协议中看到，Internet Explorer10连Windows Vista系统也不打算支持了。据协议描述，Internet Explorer10将只支持Windows 7 、Windows 8 两个版本，不过好在Windows Vista从开始到结束都是一个悲情故事，Internet Explorer10不支持Windows Vista对于这么点用户数量而言实在是很难引起反弹的。</p> <p><strong>结论</strong>: 开发中不用IE, 慢, 和行业规范不统一. 微软把 IE 作死了.</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200429232014720.png" alt="image-20200429232014720"></em></p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200429232259828.png" alt="image-20200429232259828"></em></p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200429232519965.png" alt="image-20200429232519965"></em></p> <p>2015年4月30日，微软在旧金山举行的Build 2015开发者大会上宣布——Windows 10内置代号为“Project Spartan”的新浏览器被正式命名为“<strong>Microsoft Edge</strong>”</p> <p>2022年5月16日，微软官方发布公告，称IE浏览器于2022年6月16日正式退役，此后其功能将由Edge浏览器接棒</p> <h4 id="_2-2-3-浏览器内核"><a href="#_2-2-3-浏览器内核" class="header-anchor">#</a> 2.2.3 浏览器内核</h4> <p>浏览器最核心的部分是渲染引擎（Rendering Engine），一般也称为 “<strong>浏览器内核</strong>”
负责解析网页语法，并渲染（显示）网页
<strong>不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同</strong></p> <p><strong>常见的浏览器内核</strong></p> <ul><li>Trident ：IE、360安全浏览器、360极速浏览器、搜狗高速浏览器、百度浏览器、UC 浏览器</li> <li>Gecko ：Mozilla Firefox</li> <li>Presto -&gt; Blink ：Opera</li> <li>Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）</li> <li>Webkit -&gt; Blink ：Google Chrome</li></ul> <h4 id="_2-2-4-浏览器常用快捷键-掌握"><a href="#_2-2-4-浏览器常用快捷键-掌握" class="header-anchor">#</a> 2.2.4 浏览器常用快捷键(掌握)</h4> <p>F12：显示开发者工具</p> <p>F5   :  刷新网页</p> <p>Ctrl + F5 强制刷新网页</p> <p>Ctrl+Shift+Del 删除浏览器缓存</p> <h2 id="三、html"><a href="#三、html" class="header-anchor">#</a> 三、HTML</h2> <h3 id="_3-1-介绍"><a href="#_3-1-介绍" class="header-anchor">#</a> 3.1  介绍</h3> <p>HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是说HTML就是用来写网页的。</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218175457074.png" alt="image-20240218175457074"></p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218175623124.png" alt="image-20240218175623124"></p> <p>上面都是html展示出来的效果。</p> <p><strong>HTML</strong>(<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage)  超文本标记语言。<strong>是静态网页,用于在浏览器上显示数据.</strong></p> <p><strong>超文本</strong>:  就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。</p> <p><strong>标记语言</strong>:  使用 <code>&lt; &gt;</code> 括起来的语言.</p> <p>超文本标记语言的结构, 包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218175742667.png" alt="image-20240218175742667"></p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218175811203.png" alt="image-20240218175811203"></p> <p>规范官网 : <a href="http://www.w3s.com.cn/" target="_blank" rel="noopener noreferrer">http://www.w3s.com.cn/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>文档: W3Cshool.chm</p> <h3 id="_3-2-快速入门"><a href="#_3-2-快速入门" class="header-anchor">#</a> 3.2  快速入门</h3> <p>需求：编写如下图效果的页面</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218231439489.png" alt="image-20240218231439489"></em></p> <p>要实现这个页面，我们需要从以下三步进行实现</p> <ul><li><p>新建文本文件，后缀名改为 .html</p> <p>页面文件的后缀名是 .html，所以需要该后缀名</p></li> <li><p>编写 HTML 结构标签</p> <p>HTML 是由一个一个的标签组成的，但是它也用于表示结构的标签</p></li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>html-hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        hello html
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_3-3-html-基本语法"><a href="#_3-3-html-基本语法" class="header-anchor">#</a> 3.3 HTML 基本语法</h3> <p><strong>HTML 基本结构</strong></p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200429233540408.png" alt="image-20200429233540408"></p> <p><strong><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20210811161810610.png" alt="image-20210811161810610"></strong></p> <h3 id="_3-4-基础标签"><a href="#_3-4-基础标签" class="header-anchor">#</a> 3.4 基础标签</h3> <p>HTML 的标签不区分大小写,但是为了兼容 XHTML,建议大家都小写;
<strong>双标签</strong>：开始标签和结束标签一起出现，如: <code>&lt;font&gt; 要显示的文字 &lt;/font&gt;</code>
没有斜杠的是开始标签，有斜杠的是结束标签。
<strong>单标签</strong>：<code>&lt;br/&gt;</code> <code>&lt;hr/&gt;</code>,规范的写法是在右尖括号前加上反斜杠。</p> <p>常见标签有</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20210811171740881.png" alt="image-20210811171740881"></em></p> <h4 id="_3-4-1-标题标签"><a href="#_3-4-1-标题标签" class="header-anchor">#</a> 3.4.1 标题标签</h4> <p>标题标签中 h1最大，h6最小。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>html-hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>我是标题 h1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>我是标题 h2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>我是标题 h3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>我是标题 h4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>我是标题 h5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h6</span><span class="token punctuation">&gt;</span></span>我是标题 h6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h6</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218232431645.png" alt="image-20240218232431645"></em></p> <h4 id="_3-4-2-hr标签"><a href="#_3-4-2-hr标签" class="header-anchor">#</a> 3.4.2  hr标签</h4> <p><code>hr</code> 标签在浏览器中呈现出 横线 的效果。</p> <p>在页面文件中书写 hr 标签</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;hr&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>效果如下：</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20210811173605496.png" alt="image-20210811173605496"></p> <h4 id="_3-4-3-字体标签"><a href="#_3-4-3-字体标签" class="header-anchor">#</a> 3.4.3  字体标签</h4> <p>font：字体标签</p> <ul><li><p>face 属性：用来设置字体。如 &quot;楷体&quot;、&quot;宋体&quot;等</p></li> <li><p>color 属性：设置文字颜色。颜色有三种表示方式</p> <ul><li><p><strong>英文单词</strong>：red,pink,blue...</p> <p>这种方式表示的颜色特别有限，所以一般不用。</p></li> <li><p><strong>rgb(值1,值2,值3)</strong>：值的取值范围：0~255</p> <p>此种方式也就是三原色（红绿蓝）设置方式。 例如： rgb(255,0,0)。</p> <p>这种书写起来比较麻烦，一般不用。</p></li> <li><p><strong>#值1值2值3</strong>：值的范围：00~FF</p> <p>这种方式是rgb方式的简化写法，以后基本都用此方式。</p> <p>值1表示红色的范围，值2表示绿色的范围，值3表示蓝色范围。例如： #ff0000</p></li></ul></li> <li><p>size 属性：设置文字大小</p></li></ul> <p>代码演示：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>font</span> <span class="token attr-name">face</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>楷体<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#ff0000<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>浪飞yes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>font</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218232616269.png" alt="image-20240218232616269"></em></p> <h4 id="_3-4-4-换行标签"><a href="#_3-4-4-换行标签" class="header-anchor">#</a> 3.4.4  换行标签</h4> <div class="language-html line-numbers-mode"><pre class="language-html"><code>第一行
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
第二行
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218232747564.png" alt="image-20240218232747564"></em></p> <p>注意：html 是不能通过回车换行的</p> <h4 id="_3-4-5-段落标签"><a href="#_3-4-5-段落标签" class="header-anchor">#</a> 3.4.5 段落标签</h4> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    第一段
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
	第二段
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218232918565.png" alt="image-20240218232918565"></em></p> <h4 id="_3-4-6-加粗-斜体-下划线标签"><a href="#_3-4-6-加粗-斜体-下划线标签" class="header-anchor">#</a> 3.4.6  加粗-斜体-下划线标签</h4> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">&gt;</span></span>一切都有可能<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span><span class="token punctuation">&gt;</span></span>一切都有可能<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u</span><span class="token punctuation">&gt;</span></span>一切都有可能<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240218233102494.png" alt="image-20240218233102494"></em></p> <h4 id="_3-4-7-居中标签"><a href="#_3-4-7-居中标签" class="header-anchor">#</a> 3.4.7 居中标签</h4> <p>center ：文本居中</p> <p>代码如下：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>center</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">&gt;</span></span>沙柳河水流淌<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>center</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>在浏览器效果如下：</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240223213839134.png" alt="image-20240223213839134"></em></p> <h4 id="_3-4-8-转义"><a href="#_3-4-8-转义" class="header-anchor">#</a> 3.4.8 转义</h4> <p>html中无法显示一些特殊字符，需要对特殊字符进行转义</p> <img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20210811180929858.png" alt="image-20210811180929858" style="zoom:70%;"> <h3 id="_3-5-图片标签"><a href="#_3-5-图片标签" class="header-anchor">#</a> 3.5 图片标签</h3> <p>img：定义图片</p> <ul><li>src：规定显示图像的 URL（统一资源定位符）</li> <li>height：定义图像的高度</li> <li>width：定义图像的宽度</li></ul> <p><strong>尺寸单位：</strong></p> <p>height属性和width属性有两种设置方式：</p> <ul><li>像素：单位是px</li> <li>百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）</li></ul> <p><strong>图片路径：</strong></p> <p><strong>绝对路径：完整路径</strong></p> <p>这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称。</p> <p>如：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://tse2-mm.cn.bing.net/th/id/OIP-C.sXff9ylxUCyCYXlXWdbcYwHaJ9?rs=1&amp;pid=ImgDetMain<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>300<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>400<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>这里src属性的值就是网络中的绝对路径。</p> <p><strong>相对路径：相对位置关系</strong></p> <p>找页面和其他资源的相对路径。</p> <blockquote><p>./    表示当前路径</p> <p>../   表示上一级路径</p> <p>../../   表示上两级路径</p></blockquote> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240223215106921.png" alt="image-20240223215106921"></em></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./bb/cc.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./bb/dd.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="_3-6-超链接标签"><a href="#_3-6-超链接标签" class="header-anchor">#</a> 3.6  超链接标签</h3> <p>在网页中可以看到很多超链接标签，如下</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240223215418065.png" alt="image-20240223215418065"></p> <p>图红框中的都是超链接，当我们点击这些超链接时会跳转到其他的页面或者资源。而超链接使用的是 <code>a</code> 标签。</p> <p><code>a</code> 标签属性：</p> <ul><li><p>href：指定访问资源的URL</p></li> <li><p>target：指定打开资源的方式</p> <ul><li>_self：默认值，在当前页面打开</li> <li>_blank：在空白页面打开</li></ul></li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://www.baidu.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_self<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>跳百度<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>当我们将 <code>target</code> 属性值设置为 <code>_blank</code>，会在浏览器中新开一个页签，再打开百度页面</p> <h3 id="_3-7-列表标签"><a href="#_3-7-列表标签" class="header-anchor">#</a> 3.7  列表标签</h3> <p>HTML 中列表分为</p> <ul><li><p>有序列表</p> <p>页面效果中是有标号对每一项进行标记的。</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240223215731472.png" alt="image-20240223215731472"></em></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>A<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>咖啡<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>茶<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>牛奶<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></li></ul> <ul><li><p>无序列表</p> <p>页面效果中没有标号对每一项进行标记，而是使用 点 进行标记</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240223215832296.png" alt="image-20240223215832296"></em></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>circle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>咖啡<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>茶<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>牛奶<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></li></ul> <h3 id="_3-8-表格标签"><a href="#_3-8-表格标签" class="header-anchor">#</a> 3.8 表格标签</h3> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/20191206173922397.png" alt="img"></p> <p>如上图就是一个表格，表格可以使用如下标签定义</p> <ul><li><p>table ：定义表格</p> <ul><li><p>border：规定表格边框的宽度</p></li> <li><p>width ：规定表格的宽度</p></li> <li><p>cellspacing：规定单元格之间的空白</p></li></ul></li> <li><p>tr ：定义行</p> <ul><li>align：定义表格行的内容对齐方式</li></ul></li> <li><p>td ：定义单元格</p> <ul><li><p>rowspan:规定单元格可横跨的行数</p></li> <li><p>colspan:规定单元格可横跨的列数</p></li></ul></li> <li><p>th：定义表头单元格</p></li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>500<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>列1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>列2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>列3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>列4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>data4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><h3 id="_3-9-布局标签"><a href="#_3-9-布局标签" class="header-anchor">#</a> 3.9 布局标签</h3> <p><code>div</code>定义html文档的一个区域部分，经常与css合用，用来页面布局</p> <p><code>span</code> 用于组合行内元素</p> <p><code>div</code>标签 在浏览器上会有换行的效果，而 <code>span</code> 标签在浏览器上没有换行效果。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>我是div<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>我是div<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>我是span<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>我是span<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240223221438279.png" alt="image-20240223221438279"></em></p> <h3 id="_3-10-表单标签"><a href="#_3-10-表单标签" class="header-anchor">#</a> 3.10  表单标签</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>:用于生成输入表单,该标签不可见;
    在 HTML5 之前,表单控件,如单行文本框,密码框,单选框等都必须放在<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>之间;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>常见属性如下</strong>:
action: 必填属性,表示当点击”提交”按钮时,表单数据提交到哪个地址;
method: 指定表单提交时的请求类型,该属性值有 get 或 post,分别用于 GET 或 POST 请求,默认是 get 方式,开发建议使用 post 方式;
enctype:指定表单数据的编码方式,属性有 3 个值:</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200430021620953.png" alt="image-20200430021620953"></p> <p><strong>介绍代码</strong>:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!--
from : 表单标签,用来收集用户录入的数据
action: 指定数据提交的位置,hello.html : 数据提交到 hello.html,
往后会把数据提交给Java程序去处理
method : 指定表单数据提交的方式, get: 会把数据显示在地址栏上  post
enctype : 指定表单数据提交的编码格式 :
application/x-www-form-urlencoded url 编码,默认
multipart/form-data : 不做编码,二进制方法提交 ,以后使用文件上传必须使用multipart/form-data
--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>get<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_3-11-表单控件标签-重点"><a href="#_3-11-表单控件标签-重点" class="header-anchor">#</a> 3.11 表单控件标签（重点）</h3> <p>表单控件为 form 表单的子元素,用于收集用户数据,不同标签和类型展现方式不同,需放在 form 标签内部.</p> <h4 id="_3-11-1-input-标签"><a href="#_3-11-1-input-标签" class="header-anchor">#</a> 3.11.1 input 标签</h4> <p><code>&lt;input&gt;</code> 表单控件标签里功能最丰富的,用于接收用户输入的信息;</p> <p><strong>type 属性指定输入标签的类型</strong>:</p> <ul><li>单行文本框 : type = text,输入的文本信息直接显示在框中;</li> <li>密码输入框 : type = password,输入的文本以圆点形式显示;</li> <li>单选框 : type = radio,如：性别选择;</li> <li>复选框 : type = checkbox,如：多个兴趣选择;</li> <li>隐藏域 : type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个数据;</li> <li>提交按钮 : type = submit,用于提交表单中的数据内容;</li> <li>重置按钮 : type = reset,将表单中填写的内容均设置为初始值;</li> <li>无动作按钮 : type = button,可使用javascript为其自定义事件;</li> <li>文件上传域 : type = file,会生成一个文本框和一个浏览按钮;</li> <li>图像域 : type = image, 它可以替代submit按钮,即图像提交按钮。</li></ul> <p><strong><code>&lt;input&gt;</code> 标签其他常见属性</strong>:</p> <ul><li><strong>name: 指定 input 标签的名字,没有设置 name 属性的标签不能提交数据;</strong></li> <li><strong>value:指定 input 标签的初始值;</strong></li> <li><strong>checked:设置单选框,复选框的初始状态是否选中;</strong></li> <li><strong>placeholder</strong> ：提示信息的显示</li> <li>disabled: 设置input标签加载时禁用此标签;   不能提交到</li> <li>readonly: 指定文本框内值不允许直接修改; 能被提交</li> <li>maxlength:文本框输入最大字符数,属性值是数字;</li></ul> <h4 id="_3-11-2-select-标签"><a href="#_3-11-2-select-标签" class="header-anchor">#</a> 3.11.2 select 标签</h4> <p>下拉框标签，主要使用 option 标签作为字标签，<code>&lt;seclet&gt;</code>和<code>&lt;option&gt;</code>一般同时使用：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>country<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>---请选择---<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh<span class="token punctuation">&quot;</span></span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selected<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>中国<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>英国---<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200430022532341.png" alt="image-20200430022532341"></p> <p><strong><code>&lt;select &gt;</code>  常用属性</strong>：</p> <ul><li>multiple=&quot;multiple&quot; 表示可以选中多个</li> <li>size=&quot;2&quot; 表示显示几个，（浏览器之间有差异）</li></ul> <p><strong><code>&lt;option&gt;</code>常用的属性</strong> :</p> <ul><li>selected=”selected”:默认选中哪个选项</li></ul> <h4 id="_3-11-3-textarea-标签"><a href="#_3-11-3-textarea-标签" class="header-anchor">#</a> 3.11.3 textarea 标签</h4> <p>文本域标签: 用户录入多行多列数据</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>intro<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>要显示的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200430022951697.png" alt="image-20200430022951697"></p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200430160952542-1708698498014.png" alt="image-20200430160952542"></p> <h2 id="四、css"><a href="#四、css" class="header-anchor">#</a> 四、CSS</h2> <h3 id="_4-1-概述"><a href="#_4-1-概述" class="header-anchor">#</a> 4.1  概述</h3> <p>CSS 是一门语言，用于控制网页表现。W3C标准规定了网页是由以下组成：</p> <ul><li>结构：HTML</li> <li>表现：CSS</li> <li>行为：JavaScript</li></ul> <p>CSS也有一个专业的名字：==Cascading Style Sheet（层叠样式表）。==</p> <p>如下面的代码， <code>style</code> 标签中定义的就是css代码。该代码描述了将 div 标签的内容的字体颜色设置为 红色。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">div</span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Hello CSS~<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>在浏览器中的效果如下：</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240223223056887.png" alt="image-20240223223056887"></em></p> <h3 id="_4-2-css-导入方式"><a href="#_4-2-css-导入方式" class="header-anchor">#</a> 4.2  css 导入方式</h3> <p>css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：</p> <ul><li><p>内联样式：在标签内部使用style属性，属性值是css属性键值对</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> red</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Hello CSS~<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。</p></blockquote></li> <li><p>内部样式：定义style标签，在标签内部定义css样式</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
	<span class="token selector">div</span><span class="token punctuation">{</span>
		<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><blockquote><p>这种方式可以做到在该页面中复用。</p></blockquote></li> <li><p>外部样式：定义link标签，引入外部的css文件</p> <p>编写一个css文件。名为：demo.css，内容如下:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">div</span><span class="token punctuation">{</span>
	<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>在html中引入 css 文件。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 <code>link</code> 标签引入该css文件。</p></blockquote></li></ul> <p><strong>代码演示：</strong></p> <p>项目目录结构如下：</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240223223219688.png" alt="image-20240223223219688"></em></p> <p>编写页面 <code>hello.html</code>，内容如下：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">span</span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../css/demo.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> red</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>hello css<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>hello css <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>hello css<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h3 id="_4-3-css-选择器"><a href="#_4-3-css-选择器" class="header-anchor">#</a> 4.3  css 选择器</h3> <p>css 选择器就是选取需设置样式的元素（标签），比如如下css代码：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
	<span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>如上代码中的 <code>div</code> 就是 css 中的选择器。我们只讲下面三种选择器：</p> <ul><li><p>元素选择器</p> <p>格式：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">元素名称</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>例子：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>id选择器</p> <p>格式：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">#id属性值</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>例子：</p> <p>html代码如下：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello css2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>css代码如下：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">#name</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>类选择器</p> <p>格式：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.class属性值</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>例子：</p> <p>html代码如下：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cls<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello css3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>css代码如下：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.cls</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ul> <p><strong>代码演示：</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">div</span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">#name</span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.cls</span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>div1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>div2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cls<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>div3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cls<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>span<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="_4-4-css-属性"><a href="#_4-4-css-属性" class="header-anchor">#</a> 4.4  css 属性</h3> <p>css属性我们不作为重点讲解。我们简单的看一下css的文档</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20240223223352287.png" alt="image-20240223223352287"></p> <p>css有很多css属性，你要想把它们都学会，需要花费很长的时间。而我们作为java程序员，不需要重点掌握这部分内容。对于网页三剑客中css是对我们要求最低的。能借助搜索工具实现就可。</p> <h2 id="五、小结与作业"><a href="#五、小结与作业" class="header-anchor">#</a> 五、小结与作业</h2> <h3 id="_5-1-小结"><a href="#_5-1-小结" class="header-anchor">#</a> 5.1 小结</h3> <p>html 的结构 : 头,身体
html 的语法 :
标签/元素, 所有字母小写, 都应该是闭合
属性,  属性和元素的关系   可以有多个, 多个之间使用空格分隔,属性值需要加引号(&quot;  ')</p> <p><strong>常用的元素</strong></p> <table><tr align="center"><th colspan="4">结构标签</th></tr> <tr><td>html</td> <td>主标签</td> <td>head</td> <td>头标签</td></tr> <tr><td>title</td> <td>页面标题</td> <td>body</td> <td>主体标签</td></tr></table> <table><tr align="center"><th colspan="4">常用标签</th></tr> <tr><td>div</td> <td>结构标签，占满一行，有换行</td> <td>span</td> <td>文本标签，不换行，宽由内容决定</td></tr> <tr><td>p</td> <td>段落标签，换行，行间距大</td> <td>h1~h6</td> <td>一号到六号标题</td></tr> <tr><td>br</td> <td>换行标签</td> <td>hr</td> <td>分割线标签</td></tr></table> <p><strong>今天的重点元素</strong></p> <table><thead><tr><th>标签描述</th> <th>标签</th> <th>重要属性</th></tr></thead> <tbody><tr><td><strong>超链接</strong></td> <td>a</td> <td>href/name/target</td></tr> <tr><td><strong>图片</strong></td> <td>img</td> <td>src</td></tr> <tr><td><strong>表格</strong></td> <td>table</td> <td>border/width/cell... = 0</td></tr> <tr><td>行</td> <td>tr</td> <td>align</td></tr> <tr><td>标题</td> <td>th</td> <td>colspan,rowspan</td></tr> <tr><td>普通列</td> <td>td</td> <td>colspan,rowspan</td></tr> <tr><td></td> <td></td> <td></td></tr> <tr><td><strong>表单</strong></td> <td>form</td> <td>action/method(get,post)/enctype</td></tr> <tr><td>文本框<br>   密码框<br>   隐藏域<br>   单选框	checked<br>   复选框	checked<br>   上传控件<br>   提交按钮<br>   重置按钮<br>   普通按钮</td> <td>input</td> <td>type/name/value<br></td></tr> <tr><td>下拉列表</td> <td>select</td> <td>name</td></tr> <tr><td>下拉选项</td> <td>option</td> <td>value/selected</td></tr> <tr><td>文本域</td> <td>textarea</td> <td>name</td></tr></tbody></table> <p><strong>记住: 标签的作用, 和对应的常见属性的作用</strong></p> <h3 id="_5-2-作业"><a href="#_5-2-作业" class="header-anchor">#</a> 5.2 作业</h3> <ul><li><p>练习html标签</p></li> <li><p>完成如下表单</p></li></ul> <p><strong>思路:使用表格来套表单</strong></p> <img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200430023145475.png" align="left" alt="image-20200430023145475" style="zoom:100%;"></div></div>  <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=HTML" title="标签">#HTML</a><a href="/tags/?tag=CSS" title="标签">#CSS</a></div> <!----></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/9980e4/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">MyBatis框架初级</div></a> <a href="/pages/42b6b6/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">JavaScript与DOM</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/9980e4/" class="prev">MyBatis框架初级</a></span> <span class="next"><a href="/pages/42b6b6/">JavaScript与DOM</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/0c07b2/"><div>
            IT杂货铺
            <!----></div></a> <span class="date">03-23</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/705b35/"><div>
            人事百问
            <!----></div></a> <span class="date">03-22</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/78eb56/"><div>
            MyBatis-Plus
            <!----></div></a> <span class="date">03-12</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:langfeiyes@163.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/langfeiyes" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2024-2024
    <span><a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备18007927号-1</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.a2a00aa5.js" defer></script><script src="/assets/js/2.256f807a.js" defer></script><script src="/assets/js/36.32e2e263.js" defer></script>
  </body>
</html>
